import React, { Component } from 'react';
import { Table, Message, Pagination } from '@alifd/next';
import IceContainer from '@icedesign/container';
import eventProxy from '../../../../../libs/eventProxy';
import { page, update, del } from '../../../../../api/User';
import DeleteBalloon from '../../../../../libs/DeleteBalloon';
import EditDialog from '../EditDialog';
import '../../UserTable.scss';

export default class TreeTable extends Component {
  static displayName = 'TreeTable';

  static propTypes = {
  };
   myprops={};
  static defaultProps = {};
  constructor(props) {
    super(props);
    this.state = {
      sourceData: [],
      offset: 0,
      limit: 10,
      total: 10,
    };
    this.onChangePage = this.onChangePage.bind(this);
  }

  componentWillMount() {
    eventProxy.on('system:list:change', () => {
      this.updateTable();
    });
  }
  componentDidMount() {
    this.updateTable(this.state.offset, this.state.limit);
  }
  updateTable(offset, limit) {
    page({
      offset: offset,
      limit: limit,
    }).then((response) => {
      const data = response.data.data;
      this.setState({
        sourceData: data.rows,
        refresh: false,
        total: data.count,
      });
    });
  }

  onConfirm = (id) => {
    del({
      ids: id,
    }).then((response) => {
      const data = response.data;
      if (data.code === 200){
        Message.success('删除成功');
        eventProxy.trigger('system:list:change');
      } else {
        Message.warning('删除失败');
      }
    });
  }
  
  onChangePage = (cur) => {
    const offset = (cur - 1) * this.state.limit;
    this.updateTable(offset, this.state.limit);
    this.setState({
      offset: offset, 
    });
  }
  getFormValues = (dataIndex, values) => {
    update(values).then((response) => {
      const code = response.data.code;
      if (code === 200) {
        Message.success('修改成功');
        // 刷新列表
        const sources = this.state.sourceData;
        for (let index = 0; index < sources.length; index++) {
          const ele = sources[index];
          if (ele.id === values.id) {
            sources[index] = values;
            break;
          }
        }
        this.setState({
          sourceData: sources,
        });
      }
    });
  }
  render() {
    const isZebra = true;
    const renderOpt = (value, index, record) => {
      return (
        <span>
          <EditDialog
            index={index}
            record={record}
            getFormValues={this.getFormValues}
          />
        <DeleteBalloon handleRemove={() => this.onConfirm(record.id)} />
        </span>
      );
  };
    return (
      <IceContainer>
        <Table
          dataSource={this.state.sourceData}
          primaryKey="id"
          isZebra={isZebra}
          align="center"
          rowSelection={{ onChange: () => {} }}
        >
          <Table.Column title="姓名" dataIndex="name" />
          <Table.Column title="登录名" dataIndex="loginName" />
          <Table.Column title="工号" dataIndex="userNo" />
          <Table.Column title="email" dataIndex="email" />
          <Table.Column title="编辑" cell={renderOpt} />
        </Table>
        <Pagination onChange={this.onChangePage} pageSize={this.state.limit} total={this.state.total} className="paging" />
      </IceContainer>
    );
  }
}
